<template>
  <view class="bor-top">
    <cu-cell-group>
      <cu-cell title="风险区域：" :description="detail.areaName" description-align="left"></cu-cell>
      <cu-cell title="分析单元类型：" :description="detail.riskUnitTypeLabel" description-align="left"></cu-cell>
      <cu-cell title="风险分析单元：" :description="detail.riskUnitName" description-align="left"></cu-cell>
      <view class="background-white">
        <view class="cell-label">风险事件:</view>
        <view class="cell-content">{{ detail.riskEventStr }}</view>
      </view>
      <view class="background-white">
        <view class="cell-label">排查内容:</view>
        <view class="cell-content">
          {{ detail.investigationDesc }}
        </view>
      </view>
    </cu-cell-group>

    <view class="submit-group">
      <button class="u-button block" :ripple="true" @click="handle">正常</button>
      <button class="u-button u-button-danger block" type="danger" :ripple="true" @click="goReport">上报隐患</button>
    </view>
  </view>
</template>

<script>
import { detailTast, occupy, cancel, handle, checkOccupy } from '@/api/dbd/controlCheck.js'
import { managerSourceEnum } from '@/utils/constant.js'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
export default {
  components: {
    CuCellGroup,
    CuCell
  },
  data() {
    return {
      isRender: false,
      planTaskId: undefined,
      managerSourceEnum,
      detail: {
        areaId: undefined,
        areaName: undefined,
        investigationDesc: undefined,
        planTaskId: undefined,
        riskEventStr: undefined,
        riskId: undefined,
        riskUnitName: undefined,
        riskType: undefined,
        riskTypeLabel: undefined,
        location: undefined
      },
      goReportPage: false
    }
  },
  onLoad({ planTaskId, readonly }) {
    this.planTaskId = planTaskId
    if (this.planTaskId) {
      this.getDetail()
      //this.setInterval();
    }
  },
  onShow() {
    // if (this.isRender) {
    //   this.checkOccupy();
    //   return;
    // }
    this.isRender = true
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
    // if (!this.goReportPage) {
    //   this.cancel();
    // }
  },
  methods: {
    setInterval() {
      this.timer = setInterval(() => {
        occupy(this.planTaskId, { showLoading: false })
      }, 5000)
    },
    handle() {
      this.$modal.confirm('确定处理该管控排查任务？').then(() => {
        handle(this.planTaskId).then((res) => {
          this.$modal.showToast('已经完成管控任务的排查')
          uni.navigateBack()
        })
      })
    },
    checkOccupy() {
      checkOccupy(this.planTaskId).then((res) => {
        if (res.data.status !== 1) {
          this.timer && clearInterval(this.timer)
          uni.showModal({
            title: '提示',
            content: err.msg,
            showCancel: false,
            confirmText: '确定',
            success: () => {
              uni.navigateBack()
            }
          })
        }
      })
    },
    cancel() {
      cancel(this.planTaskId).then((res) => {
        console.log('任务占用取消成功')
      })
    },
    getDetail() {
      detailTast(this.planTaskId).then((res) => {
        this.detail = res.data
      })
    },
    goReport() {
      this.goReportPage = true
      const deptId = this.detail.deptId || ''
      const deptName = this.detail.deptName || ''
      this.$nextTick(() => {
        uni.redirectTo({
          url: `/pages/work/hiddenDangerReport/index?managerSource=${managerSourceEnum.CONTROL}&planTaskId=${this.planTaskId}&deptId=${deptId}&deptName=${deptName}&riskName=${this.detail.riskUnitName}`
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.background-white {
  background-color: #fff;
  padding: 20rpx 30rpx 1rpx 30rpx;

  view {
    padding: 14rpx 0;

    text {
      color: #666;
      display: inline-block;
      width: 78%;
      vertical-align: top;
    }
  }

  .bor-btm {
    display: flex;
    border-bottom: 1px solid #d5d7e3;
  }

  .photo {
    display: flex;
    justify-content: space-between;

    image {
      width: 214rpx;
      height: 214rpx;
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.mb-130 {
  margin-bottom: 130px;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}

.cell-label {
  font-size: 30rpx;
}

.cell-content {
  font-size: 28rpx;
}

.background-white {
  padding-left: 0;
}
</style>
